﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
	<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
 	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript">
		$(document).ready(function() {
			   $("#showablum").click(function() {//你写个ajax获取地址列表换掉下面的数组就好了
					$.fancybox([//这个数据放图片地址
							'example/1_b.jpg',//这是没有标题的
						{
							'href'	: 'example/2_b.jpg',
							'title'	: '这里是用来填写标题的'
						},
						{
							'href'	: 'example/3_b.jpg',
							'title'	: '这里是用来填写标题的'
						}
					], {
						'padding'			: 0,
						'transitionIn'		: 'elastic',
						'transitionOut'		: 'elastic',
						'type'              : 'image',
						'opacity'			: true,
						'changeFade'        : 0,
						'overlayColor'		: '#000',//这是背景颜色
						'overlayOpacity'	: 0.9//这是背景透明度
					});
				});
		});
	</script>
</head>
<body>
		<a id="showablum" href="javascript:void(0);">showablum</a>
</body>
</html>